<template>
  <div class="map" id="map">
    <!-- <img :src="require('@/assets/big-screen.jpg')" alt=""> -->
  </div>
</template>

<script lang="ts">
// @ts-nocheck
import axios from 'axios'
import * as echarts from 'echarts'
import CQ from './cq.json'
import alias from './alias'

import { Mixins, Component, Watch, Vue, Prop } from 'vue-property-decorator'
import { State, Mutation, Getter, namespace } from 'vuex-class'

@Component({
  components: {},
})
export default class Maps extends Vue {
  @Prop({
    type: Array,
    default: () => [],
  })
  mapData!

  mounted() {
    this.mapData.length && this.init()
  }

  @Watch('mapData')
  mapDataWatch() {
    this.mapData.length && this.init()
  }
  get currentProject() {
    return userModule.currentProject
  }

  formatData(data) {
    data.features.forEach((item) => {
      // console.log(item.properties.name, 'item.properties.name')
      // console.log(alias[item.properties.name], 'alias[item.properties.name]')
      item.properties.name = alias[item.properties.name] || item.properties.name
    })
    return data
  }
  syncMapViews(chart) {
    let isSyncing = false

    chart.on('georoam', function (params) {
      if (isSyncing) return
      isSyncing = true

      const option = chart.getOption()
      const geoOption = option.geo[0]

      option.series.forEach((series) => {
        if (series.type === 'map') {
          series.zoom = geoOption.zoom
          series.center = geoOption.center
        }
      })

      chart.setOption(option)
      isSyncing = false
    })

    chart.on('mapRoam', function (params) {
      if (isSyncing) return
      isSyncing = true

      const option = chart.getOption()
      const seriesOption = option.series[params.seriesIndex]

      option.geo[0].zoom = seriesOption.zoom
      option.geo[0].center = seriesOption.center

      chart.setOption(option)
      isSyncing = false
    })
  }

  init() {
    console.log('init-map', this.mapData)
    var chartDom = document.getElementById('map')
    var myChart = echarts.init(chartDom)
    var option

    function updateBothComponents(params) {
      var option = myChart.getOption()

      if (params && params.dx !== undefined && params.dy !== undefined) {
        // 平移同步
        option.geo[0].center = [
          option.geo[0].center[0] + params.dx,
          option.geo[0].center[1] + params.dy,
        ]
        option.series[0].center = option.geo[0].center
      }

      if (params && params.zoom !== undefined) {
        // 缩放同步
        option.geo[0].zoom = params.zoom
        option.series[0].zoom = params.zoom
      }

      myChart.setOption(option)
    }

    // myChart.on('georoam', updateBothComponents)
    // this.syncMapViews(myChart)

    // console.log(CQ, 'CQ')

    echarts.registerMap('CQ', this.formatData(CQ))
    myChart.on('dblclick', function (params) {
      // params 包含被点击元素的信息
      console.log('点击事件参数:', params)

      // 判断是否是 tooltip 显示的内容
      if (params.componentType === 'series') {
        // 这里可以执行你的点击逻辑
        alert(`你点击了 ${params.name}，值为 ${params.data.s_a_id1}`)
      }
    })
    // this.mapData.sort(function (a, b) {
    //   return a.value - b.value;
    // });
    myChart.setOption(
      (option = {
        title: {},
        tooltip: {
          trigger: 'item',
          formatter: (params, ticket, callback) => {
            if (!params.data) return ''
            const {
              name,
              member_total,
              bt_member_total,
              used,
              field,
              field1,
              field2,
              field3,
              pay_price,
              pay_price_total,
            } = params.data
            const str = `
                <div>${name}</div>
                <div>总人数: ${member_total || 0}</div>
                <div>应享补贴数: ${bt_member_total || 0}</div>
                <div>已享受补贴: ${used || 0}</div>
                <div>补贴面积: ${field || 0}亩</div>
                <div>补贴标准: ${pay_price || 0}(亩/元)</div>
                <div>补贴金额: ${pay_price_total || 0}元</div>
              `
            return str
          },
        },
        visualMap: {
          min: 0,
          max: 100,
          text: ['补贴完成度高', '补贴完成度低'],
          textStyle: {
            color: '#fff',
          },
          padding: 10,
          realtime: false,
          calculable: true,
          show: true,
          inRange: {
            color: ['lightskyblue', 'yellow', 'orangered'],
          },
          title: {
            text: '数据密度', // 这里改成你的实际含义
            color: '#fff', // 标题颜色
            padding: [0, 0, 10, 0], // 调整标题位置（上、右、下、左）
          },
          // 将 visualMap 放在右边
          right: 10, // 距离右侧的距离，可以调整
          // top: 'middle', // 垂直居中，也可以设置为 'top' 或 'bottom' 或具体像素值
          orient: 'vertical', // 设置为垂直方向
        },
        // geo: {
        //   name: '重庆',
        //   map: 'CQ',
        //   roam: true,
        //   zoom: 1,
        //   label: {
        //     show: false,
        //   },
        //   itemStyle: {
        //     normal: {
        //       shadowColor: '#f00',
        //       shadowOffsetX: 5,
        //       shadowOffsetY: 5,
        //       // opacity: 0.5,
        //       areaColor: '#6d88de',
        //       borderColor: '#fff'
        //     },
        //     emphasis: {
        //       disabled: true,
        //       areaColor: '#f00',
        //     },
        //     select: {
        //       disabled: true,
        //     },
        //   },
        //   data: this.mapData,
        // },
        series: [
          {
            name: '重庆',
            type: 'map',
            map: 'CQ',
            zoom: 1.2,
            roam: true,
            label: {
              show: true,
              width: 100,
              color: '#fff',
              position: 'insideLeft',
              formatter: function (params) {
                // params 包含区域信息
                return `${params.name}`
              },
            },
            emphasis: {
              label: {
                color: '#fff',
              },
              itemStyle: {
                areaColor: '#f00',
                color: '#6d88de',
                borderWidth: 10,
              },
            },
            itemStyle: {
              // normal: {
              //   shadowColor: '#276fce',
              //   shadowOffsetX: 0,
              //   shadowOffsetY: 15,
              //   // opacity: 0.5,
              //   // areaColor: '#6d88de',
              //   // borderColor: '#fff'
              // },
              emphasis: {
                areaColor: '#f00',
              },
              areaColor: 'lightskyblue',
              borderColor: '#fff',
              borderWidth: 1,
            },
            data: this.mapData,
          },
        ],
      })
    )
    option && myChart.setOption(option)
    window.addEventListener('resize', function () {
      myChart.resize()
    })
  }
}
</script>

<style lang="less" scoped>
.map {
  width: 100%;
  height: 100%;
}
</style>
